<!-- start: Content -->
<style>
    .ellipsis {
        overflow: hidden;
        max-height: 70px;/***** 设置几行出现省略点 ... 根据line-height *****/
        line-height: 25px;
        margin-bottom: 10px;
    }
    .ellipsis:before {
        content:"";
        float: left;
        width: 5px;
        height: 50px;/***** 跟ellipsis height 一样 *****/
    }
    .ellipsis > *:first-child {
        float: right;
        width: 100%;
        margin-left: -5px;
    }
    .ellipsis-after {
        content: "\02026";
        box-sizing: content-box;
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        float: right;
        position: relative;
        top: -5px;
        left: 100%;
        width: 8em;
        margin-left: -8em;
        padding-right: 5px;
        text-align: right;
        background-size: 100% 100%;
        　　/* 512x1 image, gradient for IE9. Transparent at 0% -> white at 50% -> white at 100%.*/
            /*background-image: url();*/
            /*background: -webkit-gradient(linear, left top, right top,from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));*/
            /*background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);*/
            /*background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);*/
            /*background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);*/
            /*background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);*/
    }
</style>
<div id="content">
    <div class="panel box-shadow-none content-header">
        <div class="panel-body">
            <div class="col-md-12">
                <h3 class="animated fadeInLeft">专家风采</h3>
                <p class="animated fadeInDown">
                    专家 <span class="fa-angle-right fa"></span> 专家风采
                </p>
            </div>
        </div>
    </div>

    <div class="col-md-12">
        <div class="col-md-12 panel">
            <div class="col-md-12 panel-heading">
                <h4>查询</h4>
            </div>
            <div class="col-md-12 panel-body" style="padding-bottom:30px;">
                <div class="col-md-12">
                    <form class="cmxform" id="signupForm" method="get" action="">
                        <div class="col-md-6">
                            <div class="form-group form-animate-text" style="margin-bottom:0;margin-top:0px !important;">
                                <input placeholder="专家姓名" type="text" class="form-text" id="expert_name" name="validate_firstname" required>
                                <span class="bar"></span>
                                <!--<label>专家姓名</label>-->
                            </div>

                        </div>

                        <div class="col-md-6">
                            <div class="form-group form-animate-text" style="margin-bottom:0;margin-top:20px !important;">
                                <select class="form-text" id="sel_type">
                                    <option value="0" selected="selected">请选择专家类型</option>
                                    <th:block th:each="item:${types}">
                                        <option th:value="${item.id}" th:text="${item.name}"></option>
                                    </th:block>
                                </select>
                                <span class="bar"></span>
                                <!--<label>专家类别</label>-->
                            </div>
                        </div>
                        <div class="col-md-12" style="margin-top: 10px">
                            <input class="submit btn btn-danger" type="button" onclick="expertSearch();" value="查询">
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>

    <div class="col-md-12">
        <div class="row">

            <th:block th:each="item:${experts}">
                <div class="col-sm-6 col-md-3 product-grid">
                    <div class="thumbnail" >

                        <img th:src="${item.headImgUrl}" style="width: 100%;height: 200px;" alt="..." th:onclick="'zj(\''+${item.id}+'\',\''+${item.dfl}+'\')'">
                        <div class="caption">
                            <small style="display:none;">Category</small>
                            <small class="pull-right" style="display:none;">
                                <span class="rate fa-star fa"></span>
                                <span class="rate fa-star fa"></span>
                                <span class="rate fa-star fa"></span>
                                <span class="rate fa-star fa"></span>
                                <span class="rate fa-star-half fa"></span>
                            </small>
                            <h4 th:text="${item.name}"></h4>
                            <p>答复率:<th:block th:text="${item.dfl}"></th:block></p>
                            <p>职位:<th:block th:text="${item.position}"></th:block></p>
                            <div class="ellipsis">
                                <div>
                                    <p style="height: 70px;">介绍:<th:block th:text="${item.introduction}"></th:block></p>
                                </div>
                                <!--<span class="ellipsis-after"> ... </span>-->
                            </div>

                            <p><a class="btn btn-primary" role="button" th:onclick="'startZx(\''+${item.id}+'\',\''+${item.name}+'\')'">咨询</a></p>
                        </div>
                    </div>
                </div>
            </th:block>








        </div>
    </div>



    <!--在线咨询开始-->
    <div class="qqBox" id="charBox" style="display: none;">
        <div class="BoxHead">
            <div class="headImg">
                <img th:src="@{/images/user/img/6.jpg}"/>
            </div>
            <div class="internetName" id="zjName"></div>
            <input type="hidden" id="zj_name">
            <input type="hidden" id="zj_id">
        </div>
        <div class="context">

            <div class="conRight">
                <div class="RightCont">
                    <ul class="newsList">

                    </ul>
                </div>
                <div class="RightFoot">
                    <div class="emjon">
                        <ul>
                            <li><img th:src="@{/images/user/img/em_02.jpg}"/></li>
                            <li><img th:src="@{/images/user/img/em_05.jpg}"/></li>
                            <li><img th:src="@{/images/user/img/em_07.jpg}"/></li>
                            <li><img th:src="@{/images/user/img/em_12.jpg}"/></li>
                            <li><img th:src="@{/images/user/img/em_14.jpg}"/></li>
                            <li><img th:src="@{/images/user/img/em_16.jpg}"/></li>
                            <li><img th:src="@{/images/user/img/em_20.jpg}"/></li>
                            <li><img th:src="@{/images/user/img/em_23.jpg}"/></li>
                            <li><img th:src="@{/images/user/img/em_25.jpg}"/></li>
                            <li><img th:src="@{/images/user/img/em_30.jpg}"/></li>
                            <li><img th:src="@{/images/user/img/em_31.jpg}"/></li>
                            <li><img th:src="@{/images/user/img/em_33.jpg}"/></li>
                            <li><img th:src="@{/images/user/img/em_37.jpg}"/></li>
                            <li><img th:src="@{/images/user/img/em_38.jpg}"/></li>
                            <li><img th:src="@{/images/user/img/em_40.jpg}"/></li>
                            <li><img th:src="@{/images/user/img/em_45.jpg}"/></li>
                            <li><img th:src="@{/images/user/img/em_47.jpg}"/></li>
                            <li><img th:src="@{/images/user/img/em_48.jpg}"/></li>
                            <li><img th:src="@{/images/user/img/em_52.jpg}"/></li>
                            <li><img th:src="@{/images/user/img/em_54.jpg}"/></li>
                            <li><img th:src="@{/images/user/img/em_55.jpg}"/></li>
                        </ul>
                    </div>

                    <div class="inputBox">
                        <textarea id="dope" style="width: 99%;height: 75px; border: none;outline: none;" name="" rows="" cols=""></textarea>
                        <button class="sendBtn" onclick="sendMes();">发送</button>
                        <button class="closeBtn" onclick="endZx();">关闭</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--在线咨询结束-->


</div>
<!-- end: content -->
